<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="titles"></c-nav-bar>
		<view style="padding-bottom:160rpx; background-color: #f5f5f5f5;">
			<view class="tophead">
				<view class="p1">
					<view>{{listData.homestayName}}</view>
					<view class="text">
						<text>￥</text>
						<text>{{listData.refundAmount}}</text>
					</view>
				</view>
				<view class="p2">
					<text>退款数量</text>
					<u-number-box v-model="value">
						<view slot="minus" class="minus">
							<image src="https://fsy.shengsi.gov.cn/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
								mode=""></image>
						</view>
						<text slot="input" class="input">{{listData.num}}</text>
						<view slot="plus" class="plus">
							<image src="https://fsy.shengsi.gov.cn/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
								mode=""></image>
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="tit">退订原因</view>
			<!-- 	<u-checkbox-group placement="column" iconPlacement="right" style="white" cus>
							<u-checkbox :customStyle="{padding: '28rpx 24rpx',borderBottom:'1px solid #eee',background:'#fff'}"
					v-for="(item, index) in checkboxList" activeColor="#007A69" :key="index" :label="item.name"
					:name="item.name" shape="circle" size="36" labelSize="28" icon-size="22"
					@change="checks(item,index)">
				</u-checkbox>
			</u-checkbox-group> -->

			<u-radio-group v-model="value" iconPlacement="right" placement="column"
				:customStyle="{padding: '28rpx 24rpx',borderBottom:'1px solid #eee',background:'#fff'}">
				<u-radio v-for="(item, index) in checkboxList" :name="item.name" :key="index"
					@change="checks(item,index)" size="36" labelSize="28" icon-size="22" activeColor="#007A69"
					:label="item.name"></u-radio>
			</u-radio-group>


			<view class="tit">更多不爽？吐槽一下</view>
			<u--textarea v-model="value1" placeholder="请输入内容" border="none" height="200"></u--textarea>
			<view class="bnts">
				<u-button type="primary"
					customStyle="height:88rpx;border-radius:44rpx;background:#007A69;width:90%;font-size:32rpx"
					@click="refund">申请退款</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: '申请退款',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value1: "",
				checkboxValue1: [],
				checkboxList: [{
						name: "酒店质量环境差/无配套设施",
						isSelect: false
					}, {
						name: "酒店确认慢",
						isSelect: false
					},
					{
						name: "其他平台更便宜",
						isSelect: false
					},
					{
						name: "变更行程或订单信息",
						isSelect: false
					},
					{
						name: "订单信息填错",
						isSelect: false
					},
					{
						name: "重复购买",
						isSelect: false
					},
					{
						name: "其他原因",
						isSelect: false
					},
				],
				value: 1,
				FormData: {
					initiator: 2,
					orderCode: '',
					refundReason: '',
					orderStatus: '',

				},
				listData: {}
			}
		},
		onLoad(e) {

			console.log(JSON.parse(e.list)[0]);
			this.listData = JSON.parse(e.list)[0]
			this.FormData.orderCode = JSON.parse(e.list)[0].orderCode
			// this.FormData.refundReason=JSON.parse(e.list)[0].orderCode
			this.FormData.orderStatus = JSON.parse(e.list)[0].orderStatus

		},
		methods: {
			refund() {
				if (this.value1 != '') {
					this.FormData.refundReason = this.value1
				}
				this.$api.post('/api/hotel/cancelOrder', this.FormData)
					.then(res => {
						if (res.data.code == 500) {
							this.$showModal(res.data.msg);
						} else {
							let refundFee = res.data.data.refundFee * 100
							let totalFee = res.data.data.totalFee * 100
							let outRefundNo = res.data.data.outRefundNo
							let outTradeNo = res.data.data.outTradeNo
							const list = {
								refundFee,
								totalFee,
								outRefundNo,
								outTradeNo,
								...this.listData
							}
							this.$api.post('/order/icbc/refund', list).then(result => {
								if (result.statusCode === 200) {
									this.$showToast('退款中··');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pagesMy/order/index?name=酒店民宿&type=0&typeIndex=1'
										})
										setTimeout(() => {
											this.$showToast('退款成功');
										}, 1000)
									}, 1000)
								} else this.$showToast(result.data.msg);
							})
						}
					})
			},
			// 选择退订原因	
			checks(item, index) {
				let Reason = []
				Reason.push(item.name)
				this.FormData.refundReason = Reason.toString()
				this.checkboxList.forEach((d, i) => this.$set(this.checkboxList[i], 'isSelect', false));
				this.$set(this.checkboxList[index], 'isSelect', true);
			},
		}
	}
</script>
<style lang="less">
	.u-radio-group {
		background: #fff !important;

	}

	.u-radio {
		border-bottom: 1rpx solid #EFEFEF !important;
		font-size: 28rpx !important;
		color: #333333 !important;
		font-weight: Regular !important;
		height: 90rpx !important;
		line-height: 90rpx !important;
		padding: 0 24px;
	}
</style>

<style scoped lang="scss">
	page {
		background-color: #F5F8FA;
	}

	.bnts {
		position: fixed;
		padding: 24rpx 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		// background-color: aqua;
		z-index: 999;
	}

	.tit {
		padding: 24rpx;
		font-size: 32rpx;
		color: #333;
		background-color: #F5F8FA;

	}

	.tophead {
		padding: 64rpx 24rpx;
		background-color: #fff;

		.p1 {

			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			color: #333;

			.text {
				// &:first-child {
				// 	font-size: 36rpx;
				// 	color: #333;
				// }

				:nth-child(1) {
					width: 200rpx;
					text-align: right;
					font-size: 24rpx;
					color: #FF4141;
					margin-top: 12rpx;
				}

				&:last-child {
					color: #FF4141;
					font-size: 36rpx;
				}
			}

		}

		.p2 {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.input {
				margin: 0 30rpx;
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			text {
				&:nth-child(1) {
					font-size: 28rpx;
					color: #333;
					// margin: 0 30rpx;
					// font-size: 36rpx;
					// color: #333333;
					// font-weight: bold;
				}
			}

		}
	}

	.minus,
	.plus {
		border-radius: 6rpx;
		// text-align: center;
		width: 44rpx;
		height: 44rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.white {
		background-color: #fff;
	}
</style>